import Taro, {Component} from '@tarojs/taro'
import {View, Input} from '@tarojs/components'
import {AtMessage, AtButton} from 'taro-ui'
import './index.scss'
import {updateUserBankCard} from '../service'
import qs from 'qs'
import {setRefresh} from "../../../actions/refresh";
import { connect } from '@tarojs/redux'


@connect(({ refresh }) => ({
  refresh
}), (dispatch) => ({
  setRefresh (isRefresh) {
    dispatch(setRefresh(isRefresh))
  },
}))
export default class attendance extends Component {

  config = {
    navigationBarTitleText: '编辑工资卡'
  };

  constructor(props) {
    super(props);
    this.state = {
      formData: {}
    }
  }

  componentDidMount() {
    let array = window.location.hash.split('?');
    if (array.length>1){
      let obj = qs.parse(array[1]);
      this.setState({formData: JSON.parse(obj.data)});
    }
  }

  onInputChange = (e, key) => {
    let value = e.detail.value;
    let obj = {...this.state.formData};
    obj[key] = value;
    this.setState({formData: obj});
  };

  onSubmit = () => {
    const {formData} = this.state;
    if (!formData.bankAccount){
      Taro.atMessage({message: '开户银行不能为空！', type: 'error'});
      return;
    }else if (!formData.subBranch){
      Taro.atMessage({message: '支行不能为空！', type: 'error'});
      return;
    }else if (!formData.bankcardNum){
      Taro.atMessage({message: '卡号不能为空！', type: 'error'});
      return;
    }
    updateUserBankCard(formData).then(res => {
      if (res.flag){
        Taro.atMessage({message: '保存成功！', type: 'success',});
        this.props.setRefresh(true);
        setTimeout(()=>{
          Taro.navigateBack()
        },500)
      }
    });
  };

  onBack() {
    Taro.navigateBack();
  }

  render() {
    const {formData} = this.state;
    return (
      <View>
        <AtMessage/>
        <View className='main-m-t main-bg' style='padding-top: 20pt'>
          <View className='fromItem'>
            <View className='fromItem-require'>开户姓名：</View>
            <Input disabled={true} value={formData.name}/>
          </View>
          <View className='fromItem' >
            <View className='fromItem-require'>开户银行：</View>
            <Input value={formData.bankAccount} onInput={(e) => this.onInputChange(e,'bankAccount')} placeholder='请输入开户银行'/>
          </View>
          <View className='fromItem' >
            <View className='fromItem-require'>开户支行：</View>
            <Input value={formData.subBranch} onInput={(e) => this.onInputChange(e,'subBranch')} placeholder='请输入开户支行'/>
          </View>
          <View className='fromItem' >
            <View className='fromItem-require'>卡号：</View>
            <Input value={formData.bankcardNum} onInput={(e) => this.onInputChange(e,'bankcardNum')} placeholder='请输入开户卡号'/>
          </View>
        </View>
        <View className='btn-view'>
          <AtButton type='secondary' onClick={this.onBack.bind(this)}>返回</AtButton>
          <AtButton type='primary' onClick={this.onSubmit.bind(this)}>提交</AtButton>
        </View>
      </View>

    )
  }
}
